<!DOCTYPE html>
<!--suppress ALL-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--<link rel="stylesheet" th:href="@{/css/bootstrap.css}">-->
    <!-- CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
    <!-- jQuery and JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

    <script src="https://cdn.bootcss.com/jquery/3.6.3/jquery.js"></script>

</head>
<body>
<div>
    <nav class="navbar navbar-dark bg-dark">
        <a class="navbar-brand" th:href="@{'/ziroom_portal/production/productionList'}">首页</a>

        <ul class="nav justify-content-end">
            <li class="nav-item">
                <a class="nav-link active" th:if="${!#strings.isEmpty(session.userInfo)}" href="/ziroom_portal/user/userInfo">个人中心</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" th:href="@{'/ziroom_portal/cart/userCart'}">购物车</a>
            </li>
            <li class="nav-item">
                <a class="nav-link active" th:if="${!#strings.isEmpty(session.userInfo)}" th:href="@{'/ziroom_portal/user/logout'}">退出</a>
            </li>
        </ul>

    </nav>
</div>
<p/>
<div class="container">
  <div class="row">
      <div class="col-md-6">
          <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" >
              <ol class="carousel-indicators">
                  <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
                  <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
                  <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
                  <li data-target="#carouselExampleIndicators" data-slide-to="3"></li>
              </ol>
              <div class="carousel-inner">
                  <div class="carousel-item active" th:each="i,imageStat:${productionVo.imageList}">
                      <img style="width: 400px;height: 400px" th:src="${i.imageUrl}" class="d-block w-100" th:alt="${productionVo.productionIntroduction}">
                  </div>
                 <!-- <div class="carousel-item active">
                      <img th:src="${productionVo.imageList.get(0).imageUrl}" class="d-block w-100" th:alt="${productionVo.productionIntroduction}">
                  </div>
                  <div class="carousel-item active">
                      <img th:src="${productionVo.imageList.get(1).imageUrl}" class="d-block w-100" th:alt="${productionVo.productionIntroduction}">
                  </div>
                  <div class="carousel-item active">
                      <img th:src="${productionVo.imageList.get(2).imageUrl}" class="d-block w-100" th:alt="${productionVo.productionIntroduction}">
                  </div>
                  <div class="carousel-item active">
                      <img th:src="${productionVo.imageList.get(3).imageUrl}" class="d-block w-100" th:alt="${productionVo.productionIntroduction}">
                  </div>-->
              </div>
              <button class="carousel-control-prev" type="button" data-target="#carouselExampleIndicators" data-slide="prev">
                  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                  <span class="sr-only">Previous</span>
              </button>
              <button class="carousel-control-next" type="button" data-target="#carouselExampleIndicators" data-slide="next">
                  <span class="carousel-control-next-icon" aria-hidden="true"></span>
                  <span class="sr-only">Next</span>
              </button>
          </div>
      </div>
      <div class="col-md-6">
          <div style="height: 180px">
              <span style="font-size: 18px" th:text="${productionVo.productionIntroduction}"></span>
          </div>
          <div style="height: 180px">
              <span th:text="'$  '+${productionVo.productionPrice}" style="font-size: 18px;color: red"></span>
          </div>
          <div>
              <button type="button" class="btn btn-primary" th:onclick="addToCart([[${productionVo.productionId}]])">加入购物车</button>&nbsp;&nbsp;
          </div>
      </div>
  </div>
</div>
<script>
    function addToCart(productionId){
        $.ajax({
            type: "get",
            url: "/ziroom_portal/cart/addToCart?productionId="+productionId,
            success: function (result){
                if (result == 'no'){
                    alert("请先登录!");
                    location.href="/ziroom_portal/user/login";
                }else if (result == 'ok') {
                    alert("添加成功!")
                }
            }
        })
        //location.href="/ziroom_portal/cart/addToCart?productionId="+productionId;
    };

    function buyNow(productionId){

    }
</script>
</body>
</html>